<template>
  <div 
    ref="mychart" 
    class="chart" 
    :style="{width:chartWidth,height:chartHeight}"
  ></div>
</template>

<script lang="ts">
import { Component, Vue, Provide, Prop } from "vue-property-decorator";
import echarts from "echarts";

@Component({
  components: {}
})

export default class ChartsData extends Vue {
  @Prop({
    type: String,
    default: "line"
  }) readonly chartType!:string;
  @Prop(Object) chartData!:string | null;
  @Provide() chartWidth:string = ""
  @Provide() chartHeight:string = ""
  created() {
    this.initWidthHeight()
  }
  mounted() {
    this.drawChart()
  }
  initWidthHeight() {
    this.chartWidth = `${document.body.offsetWidth * 0.8}px`
    this.chartHeight = `${document.body.offsetHeight * 0.6}px`
  }
  drawChart() {
    let chart = echarts.init((this as any).$refs.mychart as HTMLCanvasElement)
    if(!chart) {
      return
    }
    switch(this.chartType) {
      case "line":
        chart.setOption((this as any).generatorLineOption())
        break;
      case "bar":
        chart.setOption((this as any).generatorBarOption())
        break;
      case "pie":
        chart.setOption((this as any).generatorPieOption())
        break;
    }
  }
  generatorLineOption() {
    return {
      title: {
        text: "一周学习量",
        subtext: "我是副标题....",
        x: "center"
      },
      xAxis: {
        type: "category",
        data: (this as any).chartData.xAxisData
      },
      yAxis: {
        type: "value"
      },
      series: [
        {
          data: (this as any).chartData.yAxisData,
          type: "line",
          smooth: true
        }
      ],
      tooltip: {
        trigger: "axis",
        axisPointer: {
          type: "cross",
          label: {
            backgroundColor: "#6a7985"
          }
        }}
    }
  }
  generatorBarOption() {
    return {
      title: {
        text: "近一周学习量",
        subtext: "我是副标题。。。",
        x: "center"
      },
      xAxis: {
        type: "category",
        data: (this as any).chartData.xAxisData
      },
      yAxis: {
        type: "value"
      },
      series: [
        {
          data: (this as any).chartData.yAxisData,
          type: "bar",
          barWidth: "20%"
        }
      ],
      color: ["#3398DB"],
      tooltip: {
        trigger: "axis",
        axisPointer: {
          type: "shadow"
        }
      },
      grid: {
        left: "3%",
        right: "4%",
        bottom: "5%"
      }
    };
  }
  generatorPieOption() {
    let pieData = [];
    for (const index in (this as any).chartData.xAxisData) {
      pieData.push({
        value: (this as any).chartData.yAxisData[index],
        name: (this as any).chartData.xAxisData[index]
      });
    }

    return {
      title: {
        text: "近一周学习量",
        subtext: "副标题罢了",
        x: "center"
      },
      tooltip: {
        trigger: "item",
        formatter: "{a} <br/>{b} : {c} ({d}%)"
      },
      legend: {
        orient: "vertical",
        left: "left",
        data: (this as any).chartData.xAxisData
      },
    series: [
        {
          name: "访问来源",
          type: "pie",
          radius: "55%",
          center: ["50%", "60%"],
          data: pieData,
          itemStyle: {
            emphasis: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: "rgba(0, 0, 0, 0.5)"
            }
          }
        }
      ]
    }
  }
}
</script>

<style lang="scss" scoped>

</style>